import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import Dialog from '@/components/dialog/Index'

import {  RemoveFromTeamTypeCnEnum } from '@/const/enum'

import { batchRemoveTeamMember, removeTeamMember } from '@/api/pay'
import type { BulletPaywageUserDto } from '@/api/bullet/types'
import { Button, Checkbox, Radio, RadioGroup } from 'ant-design-vue'

@Component
export class DialogRemove extends TableRender {
    @Prop() show!: boolean
    @Prop() isBatch!: boolean
    @Prop() ids!: number[]
    @Prop() curMember!: BulletPaywageUserDto

    showDialog = false
    showDialogDetail = false

    operateType = 0
    isChecked = false
    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show')
    handleWatchShow(val: boolean) {
        this.showDialog = val
        if (this.show) {
            this.showDialog = true
        }
    }

    @Watch('showDialog')
    handleWatchShowDialog(val: boolean) {
        this.updateShow(val)
    }

    get title() {
        return this.isBatch ? '批量删除' : '确认移除团队吗？'
    }

    onCancel() {
        this.showDialog = false
    }

    async onComfirm() {
        if (this.isBatch) {
            // 批量删除
            await batchRemoveTeamMember({
                operateType: this.operateType,
                ids: this.ids
            })
        } else {
            // 单个删除
            await removeTeamMember({
                companyId: this.curMember?.companyId,
                userId: this.curMember?.userId
            })
        }
        this.showDialog = false
        this.handleRefresh()
    }

    render() {
        return (
            <Dialog
                v-model={this.showDialog}
                title={this.title}
                width="400px"
                v-slots={{
                    default: () => {
                        return (
                            <div>
                                {this.isBatch && (
                                    <div class="flex items-center">
                                        <div class="mr-5px">操作类型</div>
                                        <RadioGroup v-model={this.operateType}>
                                            <Radio value={RemoveFromTeamTypeCnEnum.移出团队}>移除团队</Radio>
                                            <Radio value={RemoveFromTeamTypeCnEnum.注销账号}>注销账号</Radio>
                                        </RadioGroup>
                                    </div>
                                )}
                                {this.operateType === 0 ? (
                                    <div class="text-orange">
                                        *移出团队后，该人员将不在该公司，一般为已离职人员办理
                                    </div>
                                ) : (
                                    <div class="text-orange">
                                        *注销后该人员账号下所有企业数据将被删除且无法恢复，请谨慎操作
                                    </div>
                                )}
                                <div class="bg-white-dark-100 p-6px rounded-sm mt-20px">
                                    <Checkbox v-model={this.isChecked}>
                                        我已知晓数据移出的影响
                                    </Checkbox>
                                </div>
                                <div class="flex justify-center mt-20px">
                                    <Button onClick={this.onCancel}>取消</Button>
                                    <Button type="primary" disabled={!this.isChecked} onClick={this.onComfirm}>
                                        确定
                                    </Button>
                                </div>
                            </div>
                        )
                    }
                }}
            ></Dialog>
        )
    }
}

export default toNative<{ isBatch: boolean; ids: number[], curMember: BulletPaywageUserDto }, { refresh: () => void }>(DialogRemove)
